<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="../assets/css/element-ui.css"/>
  <link rel="stylesheet" href="../assets/css/styles.css"/>
  <script src="../assets/js/constant.js"></script>
  <script src="../assets/js/utils.js"></script>
  <script src="../assets/js/axios.min.js"></script>
  <script src="../assets/js/auth.js"></script>
  <!-- 引入 Vue.js -->
  <script src="../assets/js/vue.js"></script>
  <!-- 引入 Element UI 的 JS 文件 -->
  <script src="../assets/js/element-ui.js"></script>
  <style>
      .el-menu {
          height: 100%;
      }
  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <div class="container header-content">
      <div class="logo">订单管理系统</div>
      <div style="position: absolute; left: 50%;">
        <el-button type="primary" size="large" @click="open('../index.html')">
          首页
        </el-button>
        <el-dropdown size="large" @command="open">
          <el-button type="primary" size="large">
            业务中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in businessCenters" :key="item.name" :command="item.path">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-info" v-if="currentDealer.name">
        欢迎，{{ currentDealer.name }}
        <el-button type="primary" size="mini" @click="exit(1)">登出</el-button>
      </div>
    </div>
  </div>
  <div class="container main-content">
    <div class="content" style="width: 100%">
      <el-container style="height: 100%;">
        <el-aside width="220px" height="100%">
          <el-menu class="el-menu-vertical-demo">
            <recursive-menu :menu-list="dealerMenuList"></recursive-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <div style=" margin-top: 10%; text-align: center;">
            <h2>欢迎访问订单管理系统！</h2>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</div>
<script>
    Vue.component('RecursiveMenu', {
        name: 'RecursiveMenu',
        props: ['menuList'],
        template: `
          <div>
          <template v-for="(menu, index) in menuList">
            <el-submenu v-if="menu.children && menu.children.length > 0" :key="menu.menuCode" :index="index + '_'">
              <template slot="title">
                <div>
                  <i :class="menu.menuType === 'M' ? 'el-icon-document' : ''"></i>
                  <span>{{ menu.menuName }}</span>
                </div>
              </template>
              <recursive-menu :menu-list="menu.children"></recursive-menu>
            </el-submenu>
            <el-menu-item v-else-if="menu.menuType === 'M'" :key="menu.menuCode" :index="menu.path">
              {{ menu.menuName }}
            </el-menu-item>
            <el-menu-item v-else :key="menu.menuCode" :index="menu.path" @click="open(menu.path)">
              {{ menu.menuName }}
            </el-menu-item>
          </template>
          </div>
        `,
        methods: {
            open(url) {
                if (url) window.open(url)
            }
        }
    });

    checkAuthentication(1)
    new Vue({
        el: '#app',
        data() {
            return {
                currentDealer: JSON.parse(localStorage.getItem('currentDealer')) || {},
                dealerMenuList: JSON.parse(localStorage.getItem('dealerMenuList')) || [],
                showDropdown: false,
                businessCenters: [
                    { name: '订单中心', path: 'index.html' },
                    { name: '用户中心', path: '#' },
                    { name: '产品中心', path: '#' },
                    { name: '库存中心', path: '#' },
                    { name: '财务中心', path: '#' },
                    { name: '数据中心', path: '#' },
                    { name: '系统中心', path: '#' },
                    { name: '消息中心', path: '#' }
                ],
                root_host: root_host,
                request_host: request_host,
            };
        },
        methods: {
            exit,
            open(url) {
                if (url) window.open(url)
            }
        }
    });
</script>
</body>
</html>